﻿import { Vue } from 'vue-property-decorator'
import ProgressDialog from './index.vue'
import { AllDoneMessage, TaskItem } from '@/components/ProgressDialog/task'

interface TaskOptions {
  show?: boolean
  items: TaskItem[]
  columns: any[]
  title?: string
  completedMessage?: AllDoneMessage
  doubleProgress?: boolean
  forceComplete?: boolean
  autoStart?: boolean
  initSubmitText?: string
  initCancelText?: string
  completedSubmitText?: string
  completedCancelText?: string
  delayTime?: number
}
const createTask = (option: TaskOptions): typeof ProgressDialog => {
  // const vnode = new Vue({
  //   components: { ProgressDialog },
  //   template: '<progress-dialog></progress-dialog>'
  // }).$mount()
  // @ts-ignore
  const vnode = new ProgressDialog({
    propsData: option,
    directives: {
      close: () => {
        console.log('close')
      },
    },
  }).$mount()
  vnode.$el.addEventListener('close', () => {
    console.log('close')
  })
  document.body.appendChild(vnode.$el)
  console.log('pre', vnode.$listeners)
  // @ts-ignore
  return vnode.$children[0] as ProgressDialog
}

export const showTask = (option: TaskOptions) => {
  // @ts-ignore
  const progress = createTask(option) as ProgressDialog
  progress.$emit('update:show', true)
  progress.$emit('open')
}

export const showProgressDialog = (
  items: TaskItem[],
  columns = [],
  closeAction = () => {},
  ext = {
    title: undefined,
    completedMessage: undefined,
    autoClose: false,
    allSuccess: () => {},
    allCompleted: () => {},
    doubleProgress: false,
    forceComplete: false,
    autoStart: false,
    initSubmitText: '',
    initCancelText: '',
    completedSubmitText: '',
    completedCancelText: '',
    delayTime: undefined,
  }
) => {
  showTask({
    items,
    columns,
    title: ext.title,
    completedMessage: ext.completedMessage,
    doubleProgress: ext.doubleProgress,
    initSubmitText: ext.initSubmitText,
    initCancelText: ext.initCancelText,
    completedSubmitText: ext.completedSubmitText,
    completedCancelText: ext.completedCancelText,
    forceComplete: ext.forceComplete,
    autoStart: ext.autoStart,
    delayTime: ext.delayTime,
  })
}
